<script setup lang="ts">
import { useRouter } from 'vue-router'
import { computed, toRefs, ref, watch } from 'vue'
import { WeatherType } from "@/typing";
import { storeToRefs } from 'pinia'
import { homeStoriesStore } from "../../store";
import { getMAndDObj, getDate, getChineseMouth, getNowDate } from '../../utils/data-tools'
import { Toast } from 'vant';
import 'vant/es/toast/style';

const router = useRouter()

const store = homeStoriesStore();
const { toggleDate, isTransform } = storeToRefs(store)
const { updateIsShow, updateIsTransform, updateToggleData } = store;

const props = defineProps<{
    weather: WeatherType | undefined,
    scorll: number
}>()
const { weather, scorll } = toRefs(props)

const isToday = ref<boolean>();

updateIsToday();

watch(() => toggleDate.value, () => {
    updateIsToday();
})

const headOpacity = computed(() => {
    let o = Math.floor((1 - scorll.value / 600) * 100) / 100;
    o = o >= 0 ? o : 0;
    return o;
})

const headColor = computed(() => {
    let o = headOpacity.value >= 0.6 ? headOpacity.value : 0.6;
    return `rgba(255,255,255,${o})`;
})

// 渲染nav日期
let dateObj = computed(() => {
    let date = getDate(toggleDate.value)
   
    let mdObj = getMAndDObj(date)

    console.log(date,mdObj);

    return {
        ...mdObj,
        chineseM: getChineseMouth(date.getMonth())
    }
})

// 切换主页或日期页
const goToSetting = () => {
    if (router.currentRoute.value.fullPath === '/home/month-article') {
        updateIsShow(false);
        updateIsTransform(false);
        router.go(-1);
    }
    else {
        updateIsShow(true);
        updateIsTransform(true);
        router.push({ name: 'month-article' });
    }
}

function goToToday() {
    const date = getNowDate();
    updateToggleData(date);

    Toast.loading({
        message: '正在加载...',
        forbidClick: true,
    });
}

function updateIsToday() {
    if (toggleDate.value === getNowDate() || toggleDate.value === '0') {
        isToday.value = true;
    }
    else {
        isToday.value = false;
    }
}
</script>


<template>
    <div class="h-46 px-5 py-4 flex items-center justify-between sticky top-0 z-50"
        :style="{ backgroundColor: headColor }">
        <div class=" flex items-end font-bold " @click="goToSetting">
            <div class=" text-4xl mr-3"> {{ dateObj.d }}</div>
            <div class="text-xs ">{{ dateObj.chineseM }} {{ dateObj.y }}</div>
            <div class="tall" :style="isTransform ? 'transform: rotate(180deg)' : 'transform: rotate(0deg)'"
                style="transition: all .2s linear ; transform-origin: center; "></div>
        </div>
        <div>
            <van-button v-show="!isToday" size="small" type="default" @click="goToToday">今天
            </van-button>
            <div v-show="isToday" class="text-xs text-gray-500 ">
                {{ weather?.city_name }} · {{ weather?.climate }} {{ weather?.temperature }}℃
            </div>
        </div>

    </div>
</template>

<style>
.tall {
    display: block;
    margin-left: 7px;
    border: 10px solid black;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 0;
    width: 0;
    height: 0;
}
</style>